<template>
  <div>
    <h2>组件传值</h2>
    <!-- 如果给子组件传递数据，则通过自定义属性得方式传递 -->
    <!-- <goods-list :uname='username' :age='age' gender='男'></goods-list>
    <goods-list :uname='username' :age='age' gender='女'></goods-list>
    <goods-list :uname='username' :age='age' ></goods-list> -->


    <!-- <goods-list v-for="item in list" :key="item.id" :item="item"> </goods-list> -->
    <goods-list 
    v-for="item in list" 
    :key="item.id" 
    :id="item.id" 
    :pname="item.pname" 
    :info="item.info" 
    :price="item.price"
    @kanyidao="kanjia"
    ></goods-list>
  </div>
</template>

<script>
import GoodsList from "./components/GoodsList.vue"
export default {
  data () {
    return {
      username:'lisisi',
      age:20,
      list: [
          { id: 101, pname: '超级无敌棒棒糖', price: 15, info: '好吃，再来一根' },
          { id: 171, pname: '超级解渴水果茶', price: 80, info: '好甜，真好喝' },
          { id: 191, pname: '超级好吃大鸡腿', price: 60, info: '可口，下饭~' }
        ]
    }
  },
  //注册组件
  components:{
    GoodsList
  },
  methods:{
    kanjia(id){
      // console.log(id);
      const row = this.list.find(item => {
        return item.id === id
      })
      row.price--
    }
  }
}
</script>

<style>

</style>